<template>
    <div class="edu-page-warp">
        <ConditionCard body-style="padding: 24px 24px 6px;" @search="search" @reset="reset">
          <el-form :model="queryForm" label-width="130px" ref="conditionForm">
            <el-row :gutter="24">
              <el-col :span="8">
                    <el-form-item :label="$t('label.schoolTerm') + ':'" prop='calendarId'>
                        <CalendarSelect v-model="calendarId"></CalendarSelect>
                    </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="课程代码/名称:" prop='teachingClassCode'>
                    <el-input
                        style="width: 100%"
                        v-model="queryForm.condition"
                        maxlength="256"
                        :placeholder="$t('common.pla.pleaseInput')"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </ConditionCard>
        <el-card shadow="never" body-style="padding: 24px;">
            <div class="edu-page-title" style="margin-bottom: 20px;">课程列表</div>
            <edu-table :data="tableData" :order="false" :pageNum="page.pageNum_" :selection="false"
                :pageSize="page.pageSize_" :total="page.total_" @page-change="pageChange" ref="courseTable">
                <edu-table-column :label="$t('label.courseCode')"  prop="code"></edu-table-column>
                <edu-table-column :label="$t('label.courseName')"  prop="name"></edu-table-column>
                <edu-table-column :label="$t('common.text.operation')"  width='240'>
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click.stop="getDetail(scope.row)">查看详情</el-button>
                      </template>
                </edu-table-column>
            </edu-table>
        </el-card>
    </div>
</template>
<script>
    import {findCoursesByGrade} from 'common/src/api/culture/bachelor';
    import calendars from "common/src/api/calendars";
    export default {
        name: 'assessment-method-detection',
        data() {
            return {
                queryForm: {
                    grade: "",
                    term: "",
                    condition: "",
                    projId: '1',
                },
                calendarId: '',
                listData: [],
                tableData: [],
                page: {
                    pageNum_: 1,
                    pageSize_: 20,
                    total_: 0,
                }
            }
        },
        created() {
            this.init();
            
        },
        watch: {
            calendarId: function(_n, _o) {
                console.log(_n)
                console.log(_o)
                if(_n){
                    this.listData.forEach(d => {
                        if(d.id == _n){
                            this.queryForm.grade = d.year;
                            this.queryForm.term = d.term;
                        }
                    });
                }else{
                    this.queryForm.grade = "";
                    this.queryForm.term = "";
                }
            },
        },
        methods: {
            init() {
                calendars.listAllCalendar().then(res => {
                    this.listData = res.data;
                    let calendarId = this.calendarId
                    console.log(calendarId)
                    res.data.forEach(d => {
                        if(d.id == calendarId){
                             console.log(calendarId)
                            this.queryForm.grade = d.year;
                            this.queryForm.term = d.term;
                        }
                    });
                    this.search();
                });
            },
            reset() {
                this.$refs.conditionForm.resetFields();
                this.queryForm.grade = "";
                this.queryForm.term = "";
                this.page.pageNum_ = 1;
                this.search();
            },
            search({pageSize, pageNum} = {}) {
                let param = {
                    pageNum_: pageNum || this.page.pageNum_,
                    pageSize_: pageSize || this.page.pageSize_,
                    condition: this.queryForm.condition,
                    grade: this.queryForm.grade,
                    term: this.queryForm.term,
                    projId: 1,
                }
                console.log(this.queryForm.calendarId)
                findCoursesByGrade(param).then(res => {
                    if (res && res.code === 200) {
                        let data = res.data || [];
                        this.tableData = data.list || [];
                        this.page.pageNum_ = data.pageNum_;
                        this.page.pageSize_ = data.pageSize_;
                        this.page.total_ = data.total_;
                    }
                }).catch(() => {
                    this.tableData = [];
                    this.page.pageNum_ = 1;
                    this.page.total_ = 0;
                })
            },
            getDetail(row) {
                this.$router.push({
                    name: 'pyAssessmentMethodDetail',
                    params: {
                        grade:row.grade,
                        term: this.queryForm.term,
                        condition: row.code,
                        courseName: row.name,
                    }
                })
            },
            pageChange(pageOption) {
                this.search(pageOption);
            }
        },
    }


</script>